<template>
  <h1>Scroller 滚动条</h1>
  <p>需要 scroller 与 scroller-item 配合使用。</p>
  <p>scroller-item 的遍历必须加 key，因为 currentList 会随动画过程自动变化。</p>

  <h3>基本用法</h3>
  <!-- prettier-ignore -->
  <code-demo style="background: #eee;">
    <scroller
      ref="scrollerRef"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <template #default="{ currentList, height }">
        <scroller-item
          v-for="item in currentList"
          :key="item.label"
        >
          <div :style="{ height: `${height}px`, background: item.color }">
            <span>{{ item.label }}</span>
            <el-button @click="clickRemove">remove</el-button>
          </div>
        </scroller-item>
      </template>
    </scroller>

    <el-button @click="clickStart">start</el-button>

    <template #code>
      {{ `
<template>
  <scroller
    ref="scrollerRef"
    @mouseenter="mouseenter"
    @mouseleave="mouseleave"
  >
    <template #default="{ currentList, height }">
      <scroller-item
        v-for="item in currentList"
        :key="item.label"
      >
        <div :style="{ height: \`\${height}px\`, background: item.color }">
          <span>\{\{ item.label \}\}</span>
          <el-button @click="clickRemove">remove</el-button>
        </div>
      </scroller-item>
    </template>
  </scroller>

  <el-button @click="clickStart">start</el-button>
</template>

<script>
import { onMounted, ref } from 'vue'

const list = [
  { label: 1, color: '#8d9ec4' },
  { label: 2, color: '#8dc4b3' },
  { label: 3, color: '#c3c48d' },
  { label: 4, color: '#a387a5' },
]

const scrollerRef = ref()

// 初始化开始动画，可重复调用
function clickStart() {
  scrollerRef.value.start({ list })
}

// 移除当前项
function clickRemove() {
  scrollerRef.value.removeCurrent()
}

// 鼠标移入暂停动画循环
function mouseenter() {
  scrollerRef.value.pause()
}
// 鼠标移出恢复动画循环
function mouseleave() {
  scrollerRef.value.resume()
}
</script>
      ` }}
    </template>
  </code-demo>

  <h3>Slots</h3>
  <table-info type="slot" :data="slotTable"></table-info>
  <h3>Exposes</h3>
  <table-info type="expose" :data="exposeTable"></table-info>
</template>

<script setup>
import { ref } from 'vue'

const list = [
  { label: 1, color: '#8d9ec4' },
  { label: 2, color: '#8dc4b3' },
  { label: 3, color: '#c3c48d' },
  { label: 4, color: '#a387a5' },
]

const scrollerRef = ref()

// 初始化开始动画，可重复调用
function clickStart() {
  scrollerRef.value.start({ list })
}

// 移除当前项
function clickRemove() {
  scrollerRef.value.removeCurrent()
}

// 鼠标移入暂停动画循环
function mouseenter() {
  console.log('mouse enter')
  scrollerRef.value.pause()
}
// 鼠标移出恢复动画循环
function mouseleave() {
  console.log('mouse leave')
  scrollerRef.value.resume()
}

const slotTable = [
  {
    name: 'default',
    desc: '默认插槽，用于包含scroller-item列表，接收作用域参数{ currentList, height }，height同start方法的height参数',
  },
]

const exposeTable = [
  {
    name: 'start',
    desc: '初始化动画，也可用于重置动画',
    type: '(list = [], height = 60, duration = 500, delay = 1000) => {}',
  },
  {
    name: 'removeCurrent',
    desc: '移除当前项，只有在补间动画完成时可以触发',
    type: '() => {}',
  },
  { name: 'pause', desc: '暂停动画循环', type: '() => {}' },
  { name: 'resume', desc: '恢复动画循环', type: '() => {}' },
]
</script>
